<template>
    <div class="box">
        <el-form label-position="right" label-width="100" ref="abc" :model="addList" :rules="rules">
            <el-form-item label="商品id">
                <el-input v-model="addList.id" placeholder="请输入商品id" clearable />
            </el-form-item>
            <el-form-item label="商品名称" prop="name">
                <el-input v-model="addList.name" placeholder="商品名称" clearable />
            </el-form-item>
            <el-form-item label="规格">
                <el-input v-model="addList.specification" placeholder="请输入规格" clearable />
            </el-form-item>
            <el-form-item label="单价">
                <el-input v-model="addList.price" placeholder="请输入单价" clearable />
            </el-form-item>
            <el-form-item label="数量" prop="num">
                <el-input v-model="addList.num" placeholder="请输入数量" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">提交</el-button>
                <el-button @click="reset">清空</el-button>
            </el-form-item>
        </el-form>

        <el-button @click="get">get请求</el-button>
        <el-button @click="post">post请求</el-button>
        <el-button @click="getlist">获取鸡汤</el-button>
        <el-button @click="getWeather1">获取泰安三天天气</el-button>
        <input type="text" v-model="city" @keyup.enter="City"><button @click="City">获取城市天气</button>
    </div>
    <!-- 手写API -->
    <el-button v-for="(item,index) in list" :key="index">{{item.name}}:{{ item.price }}</el-button>
    <!-- 毒鸡汤 -->
    <div v-for="(item1,index1) in list1" :key="index1">{{ item1.dujitang}}</div>
    <!-- 天气系统 -->
    <div v-for="(item2,index2) in weatherList" :key="index2">
        时间：{{ item2.fxDate }}&nbsp;/
        日出时间：{{ item2.sunrise }}&nbsp;/
        月相：{{ item2.moonPhase }}&nbsp;/
        天气情况：{{ item2.textDay}}&nbsp;/
        最高气温：{{ item2.tempMax}}&nbsp;/
        最低气温:{{ item2.tempMin}}&nbsp;/
        白天风向：{{ item2.windDirDay}}&nbsp;/
        白天风力等级：{{ item2.windScaleDay }}&nbsp;/
        白天风速：{{ item2.windSpeedDay }}km/h
    </div>
    <!-- 空气质量 -->
    <div v-for="(item3,index3) in airquality" :key="index3">
        {{ item3.category}}
        {{ item3.health.effect}}
    </div>
    <!-- 省市区 -->
    <el-button @click="cityList">获取城市id</el-button>
    <el-button @click="Airquality">获取城市空气质量</el-button>
    <el-button @click="ariCity">获取空气质量城市id</el-button>
    <el-cascader placeholder="请选择地区" size="default" :options="regionData" v-model="selectedOptions"
        @change="handleChange">
    </el-cascader>
    <div>

    </div>
</template>
<script setup>
import axios from 'axios';
import { reactive, ref } from 'vue'
import { regionData } from 'element-china-area-data'
const selectedOptions = ref(null)
//省市区编码
const handleChange = (value) => {
  console.log(value)
}
const abc = ref(null)

const list = ref(null)
const list1 = ref([])
//天气列表
const weatherList = ref(null)
//城市
const city = ref('')
//空气质量
const  airquality = ref(null)
//获取城市
function City() {
    axios.get('/v7/weather/3d',{
        params: {
            location : city.value ,
            key : "67bd9eeee68945688b2b6ec748db9ba1"
        }   
    })
        .then((res) => {
            weatherList.value = res.data.daily
        })
}
//获取城市id
function cityList() {
    axios.get('/v2/city/lookup?',{
        params: {
            location :  selectedOptions.value[2],
            key : "67bd9eeee68945688b2b6ec748db9ba1"
        }
    })
        .then((res) => {
            getWeather(res.data.location[0].id)
          
    })
}
//获取天气
function getWeather(id) {
    axios.get('/v7/weather/3d', {
        params: {
            location: id ,
            key:"67bd9eeee68945688b2b6ec748db9ba1"
        }
    })
        .then((res) => {
            weatherList.value = res.data.daily
    })
} 
function getWeather1() {
    axios.get('v7/weather/3d', {
        params: {
            location: "101120803",
            key: "67bd9eeee68945688b2b6ec748db9ba1"
        }
    })
        .then((res) => {
            weatherList.value = res.data.daily
        })
} 
//空气质量
function Airquality(id) {
    axios.get(`/airquality/v1/now/${id}`, {
        params: {
            pollutant: true ,
            station: true,
            key:"67bd9eeee68945688b2b6ec748db9ba1"
        }
    })
        .then((res) => {
            airquality.value = res.data.aqi
            console.log(airquality.value);
             
    })
}
//空气质量城市id 
function ariCity() {
    axios.get('/v2/city/lookup?', {
        params: {
            location: selectedOptions.value[2],
            key: "67bd9eeee68945688b2b6ec748db9ba1"
        }
    })
        .then((res) => {
            Airquality(res.data.location[0].id)
    })
}
//毒鸡汤
function getlist() {
    axios.get('https://v.api.aa1.cn/api/api-wenan-dujitang/index.php?aa1=json')
        .then((res) => {
            // console.log(res);
            list1.value = res.data
    })
}
 //手写API 
function get() {
    axios.get('/api/login.json')
        .then((res) => {
            console.log(res.data);
            list.value = res.data.proList
        })
}
function post() {
    axios.post('https://v1.ailtba.com/v1/getCompany',)
        .then((res) => {
            console.log(res)
        }).catch((err) => {
            console.log(err);
        })
}

// 表单数据
const addList = reactive([
    {
        id: null,
        name: '',
        specification: [],
        price: '',
        num: ''
    }
])

// 表单校验
const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
    num: [{ required: true, message: '你填了吗', trigger: 'blur' },
    { min: 1, max: 6, message: '请输入正确的数据', trigger: 'blur' }]
})
const submit = () => {
    abc.value.validate((valid) => {
        if (valid)
            alert('成功')
        else
            alert('失败')
    })
    console.log('submit!')
}
function reset() {
    abc.value.resetFields();//注意abc是谁
}
</script>
<style lang="scss">
.box{
    width: 80%;
}
</style>